<template>
  <div class="box">
    <div class="typeRow">
      <el-label style="width: 100px;">申请类型</el-label>
      <el-select v-model="type" placeholder="请选择申请类型" class="typeSelect" style="width: 100%;">
        <el-option v-for="(item, index) in types" :key="index" :label="item.name" :value="item.id"></el-option>
      </el-select>
    </div>
    <div class="timeRow">
      <el-label style="width: 100px;">申请时间</el-label>
      <el-date-picker
        v-model="startTime"
        type="date"
        placeholder="开始日期"
        style="width: 47%;"
      />
      -
      <el-date-picker
        v-model="endTime"
        type="date"
        placeholder="结束日期"
        style="width: 47%;"
      />
    </div>
    <!-- <div class="statusRow">
      <el-label class="statusLabel" style="width: 100px;">申请状态</el-label>
      <el-select v-model="status" placeholder="请选择申请状态" class="statusSelect" style="width: 100%;">
        <el-option v-for="(item, index) in statusList" :key="index" :label="item.name" :value="item"></el-option>
      </el-select>
    </div> -->
  </div>
</template>

<script setup>
import { ref, onMounted, watch, defineEmits } from 'vue';
import { getAllTypes } from '../api/application.js';
import {getCurDateTime} from'../utils/common.js';

const types = ref([]);
const startTime = ref(null);
const endTime = ref(null);
const type = ref(null);

// 定义 emits
const emit = defineEmits(['filterCondition']);

// 定义 filterCondition
const filterCondition = ref({
  startTime: null,
  endTime: null,
  type: null
});

// 监视 type 的变化
watch(type, (newValue) => {
  filterCondition.value.type = newValue;
  emit('filterCondition', filterCondition.value);
  console.log("filterCondition.value:", filterCondition.value);
});

// 监视 startTime 的变化
watch(startTime, (newValue) => {
  filterCondition.value.startTime = getCurDateTime(newValue);
  emit('filterCondition', filterCondition.value);
});

// 监视 endTime 的变化（闭区间）
watch(endTime, (newValue) => {
  filterCondition.value.endTime = getCurDateTime(newValue, true); // 关键修改
  emit('filterCondition', filterCondition.value);
});

onMounted(async () => {
  const res = await getAllTypes();
  console.log("res:", res);
  types.value = res.result.map((item) => ({
    id: item.id,
    name: item.flowType
  }));
  console.log("types", types.value);
});
</script>

<style scoped>
.box {
  background-color: white;
  display: flex;
  flex-direction: column;
  align-content: center;
  border: 1px solid white;
  border-radius: 10px;
  padding: 5px;
}

.typeRow,
.timeRow,
.statusRow {
  display: flex;
  align-items: center;
  margin: 5px;
  color: #021148;
}

.timeRow .el-date-picker {
  width: 100%;
}

.custom-date-picker-popper {
  max-width: 60%;
  /* 限制弹出层的最大宽度 */
}
</style>